<template>
  <el-select
    style="width: 100%"
    v-model="platformVal"
    clearable
    filterable
    placeholder="请选择平台"
    :multiple="multiple"
    collapse-tags
    collapse-tags-tooltip
  >
    <el-option
      v-for="item in platform"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
</template>

<script setup>
import { getPlatform } from "@/api/public";

const props = defineProps({
  modelValue: { type: [String, Number, Array], default: "" },
  multiple: { type: Boolean, default: false },
});

const emit = defineEmits(["update:modelValue", "change"]);

const platform = ref([]);
const platformVal = ref();

onMounted(() => {
  getPlatformReq();
});

watch(
  () => props.modelValue,
  (val) => {
    platformVal.value = val;
  }
);

watch(
  () => platformVal.value,
  (val) => {
    emit("update:modelValue", val);
    emit("change", val);
  }
);

const getPlatformReq = async () => {
  try {
    const { data } = await getPlatform();
    platform.value = data.map((n) => ({
      label: n.platform_name,
      value: n.platform_id,
    }));
  } catch (e) {
    console.error(e);
  }
};
</script>
